<template>
	<view class="body">
		<!-- 头部  -->
		<uni-nav-bar class="nav" :backgroundColor="bgcolor" color="#fff" title="微圈" />
		<!-- 搜索 -->
		<view class="sear">
			<view class="sear-half">
				<uni-search-bar class="uni-mt" radius="100" placeholder="搜索" bgColor='#F2F2F2' clearButton="none" cancelButton="none" @confirm="search" />
				<uni-icons type="plus-filled" size="45" @click="addMicro" class="icon_img" color="#0DAB9D"></uni-icons>
			</view>
		</view>
		<!-- tabs信息 -->
			<u-tabs id="hua" :list="list1" @click="qiehuan"></u-tabs>
		<!--  数据 -->
		<view>
			<ul>
				<li v-for="(item,index) in circles" @click="circlesEvery(index,item.microcircleId)">
					<image class="ke" :src="item.artcleUrl"></image>
					<view class="list-textView">
						<view class="title">{{item.articleTitle}}</view>
						<view class="preface">{{item.articleContent}}</view>
						<view class="articleSystem">文章体系<span class="circles">主讲人：</span><span>{{item.nickname}}</span></view>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	// 查询微圈的分类
	import {
		getJsMicrocircle
	} from '@/static/microCircle/http/getData.js'
	
	//查看微圈分类对应的课程
	import {
		getJsMicrocircleById
	} from '@/static/microCircle/http/getData.js'
	

	export default {
		data() {
			return {
				bgcolor: "#0DAB9D",
				list1: [],
				circles: []
			}
		},
		mounted() {
			this.selectMicrocircle(),
			this.selectJsMicrocircleById()
		},
		methods:{
			/* 查询分类 */
			selectMicrocircle(){
				getJsMicrocircle().then(res => {
					uni.setStorageSync('list1', JSON.stringify(res.data.data));
					res.data.data.forEach((e ,index) =>{
						this.list1.push({"name":e.acticleCategrayName})
					})
				});
			},
			/* 进入先执行一遍 */
			selectJsMicrocircleById(){
				var list = JSON.parse(uni.getStorageSync('list1'));
				getJsMicrocircleById({"acticleCategoryId" : list[0].acticleCategoryId}).then(res => {
					res.data.data.forEach((e ,index) =>{
						this.circles.push(e)
					})
				})
			},
			/* 不同节点下不同的数据 */
			qiehuan(id){
				this.circles = [];
				var list = JSON.parse(uni.getStorageSync('list1'));
				for(var i = 0 ; i < list.length ;i++){
					if(id.name == list[i].acticleCategrayName){
						getJsMicrocircleById({'acticleCategoryId' : list[i].acticleCategoryId}).then(res => {
							res.data.data.forEach((e ,index) =>{
								this.circles.push(e);
							})
						});
					}
				}
			},
			/* 微圈详情 */
			circlesEvery(index,microcircleId){
				uni.navigateTo({
					url:'/pages/microCircle/MicroDetailsPage?microcircleId='+microcircleId
				})
			},
			/* 跳转到添加微圈界面 */
			addMicro(){
				uni.navigateTo({
					url:'/pages/microCircle/addMicroPage'
				})
			}
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.icon_img{
		width: 40px;
		height: 40px;
		float: right;
		margin:-37px 20px 0 0;
	}
	.sear{
		background-color: #FFFFFF;
		margin: -5;
	}
	.sear-half{
		width: 95%;
		margin: 0 auto;
	}
	.sear-half .uni-mt{
		width: 80%;
	}
	#hua{
		width: 100%;
	}
	li{
		list-style: none;
		width: 90%;
		height: 90px;
		margin: 30px auto;
	}
	.ke{
		float: left;
		width: 40%;
		height: 100%;
		border-radius: 10%;
	}
	.list-textView{
		width: 57%;
		line-height: 30px;
		float: left;
		margin-left: 10px;
	}
	.list-textView .title{
		font-size: 15px;
		font-weight: bold;
	}
	.list-textView .preface{
		color: #9C9C9C;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.list-textView .articleSystem{
		color: #9C9C9C;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.list-textView .articleSystem .circles{
		margin-left: 50px;
	}
</style>
